<script lang="ts" setup>
import type {JcxFormSchema} from '@/components/effects/ui';
import type {Recordable} from '@/typings/effects';

import {computed, h, ref} from 'vue';

import {AuthenticationRegister, z} from '@/components/effects/ui';
import {$t} from '@/locales/effects';

defineOptions({name: 'Register'});

const loading = ref(false);

const formSchema = computed((): JcxFormSchema[] => {
  return [
    {
      component: 'JcxInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, {message: $t('authentication.usernameTip')}),
    },
    {
      component: 'JcxInputPassword',
      componentProps: {
        passwordStrength: true,
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      renderComponentContent() {
        return {
          strengthText: () => $t('authentication.passwordStrength'),
        };
      },
      rules: z.string().min(1, {message: $t('authentication.passwordTip')}),
    },
    {
      component: 'JcxInputPassword',
      componentProps: {
        placeholder: $t('authentication.confirmPassword'),
      },
      dependencies: {
        rules(values) {
          const {password} = values;
          return z
              .string({required_error: $t('authentication.passwordTip')})
              .min(1, {message: $t('authentication.passwordTip')})
              .refine((value) => value === password, {
                message: $t('authentication.confirmPasswordTip'),
              });
        },
        triggerFields: ['password'],
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
    },
    {
      component: 'JcxCheckbox',
      fieldName: 'agreePolicy',
      renderComponentContent: () => ({
        default: () =>
            h('span', [
              $t('authentication.agree'),
              h(
                  'a',
                  {
                    class: 'jcx-link ml-1 ',
                    href: '',
                  },
                  `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
              ),
            ]),
      }),
      rules: z.boolean().refine((value) => !!value, {
        message: $t('authentication.agreeTip'),
      }),
    },
  ];
});

function handleSubmit(value: Recordable<any>) {
  // eslint-disable-next-line no-console
  console.log('register submit:', value);
}
</script>

<template>
  <AuthenticationRegister
      :form-schema="formSchema"
      :loading="loading"
      @submit="handleSubmit"
  />
</template>
